<template>
    <a-space>
        伪原创类型:<a-select style="width: 200px" v-model:value="wycType" :options="wycDockerImageOptions"></a-select>
        <a-button type="primary" @click="searchFunc" :loading="searchLoading" style="width: 100px">
            <template #icon>
                <SearchOutlined />
            </template>
            搜索
        </a-button>
    </a-space>
    <br />
    <a-spin tip="Loading..." :spinning="tableLoading" :style="spinStyle">
        <a-table
            v-show="tableData.length > 0"
            :columns="columns"
            :data-source="tableData"
            style="margin-top: 10px"
            sticky
            bordered
            :pagination="false"
            size="small"
            class="table"
        >
            <template #bodyCell="{ column, text }">
                <template v-if="column.dataIndex === 'name'">
                    <a>{{ text }}</a>
                </template>
            </template>
        </a-table>
        <br />
        <a-row justify="center" v-if="total > pageSize">
            <a-pagination
                v-model:current="current"
                v-model:pageSize="pageSize"
                show-quick-jumper
                :page-size-options="['10', '20', '50', '100', '250', '500', '750', '1000']"
                :total="total"
                @change="pageChange"
                :show-total="(total: number) => `总计 ${total} 项`"
            />
        </a-row>
    </a-spin>
</template>

<script lang="ts" setup>
    import { SearchOutlined } from "@ant-design/icons-vue";
    import { useColumns, wycDockerImages } from "@/hooks/useWycTask";
    import { useSpinLoadingState } from "@/hooks/useCommon";
    import { wycTasksApi } from "@/api/wyc";
    const { spinStyle, viewLoading: tableLoading } = useSpinLoadingState();
    const wycType = ref("-1");
    const { columns, isReloadData } = useColumns();
    const wycDockerImageOptions = computed<SelectOption>(() => {
        return [{ label: "请选择", value: "-1" }].concat(
            Object.entries(wycDockerImages).map((item) => {
                return { label: item[1], value: item[1] };
            })
        );
    });
    const tableData = ref([]);
    const total = ref(0);
    // 分页
    const pageSize = ref(10);
    // 当前页
    const current = ref(1);
    // 当前页变化
    const pageChange = (pageNumber: number) => {
        current.value = pageNumber;
        searchFunc();
    };
    const searchFunc = () => {
        tableLoading.value = true;
        const params = { page: current.value, limit: pageSize.value, imagename: wycType.value };
        if (wycType.value === "-1") {
            Reflect.deleteProperty(params, "imagename");
        }
        wycTasksApi(params)
            .then((res) => {
                tableData.value = res.data.data;
                total.value = res.data.count;
            })
            .finally(() => {
                tableLoading.value = false;
                isReloadData.value = false;
            });
    };
    watch(isReloadData, (v) => v && searchFunc());
    const searchLoading = ref(false);
    onMounted(() => {
        searchFunc();
    });
</script>

<style scoped lang="scss"></style>
